import 'package:flutter/material.dart';

class SamplePage extends StatefulWidget {
  const SamplePage({super.key});

  @override
  State<SamplePage> createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  bool _isPanelVisible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("聊天输入框示例")),
      body: Column(
        children: [
          Expanded(
            child: Container(
              color: Colors.white,
              child: ListView(
                children: List.generate(
                  10,
                  (index) => ListTile(
                    title: Text("消息 $index"),
                    subtitle: Text("这是第 $index 条消息"),
                  ),
                ),
              ),
            ),
          ),
          _buildInputBar(),
          AnimatedCrossFade(
            sizeCurve: Curves.easeInOut,
            firstChild: Container(),
            // 空的容器，代表面板隐藏
            secondChild: _buildMorePanel(),
            // 更多面板
            crossFadeState: _isPanelVisible ? CrossFadeState.showSecond : CrossFadeState.showFirst,
            duration: Duration(milliseconds: 250),
          ),
        ],
      ),
    );
  }

  Widget _buildMorePanel() {
    return Container(
      color: Colors.grey[200],
      padding: EdgeInsets.all(10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _buildMoreOption(Icons.photo, "图片"),
          _buildMoreOption(Icons.camera_alt, "拍照"),
          _buildMoreOption(Icons.insert_drive_file, "文件"),
        ],
      ),
    );
  }

  Widget _buildMoreOption(IconData icon, String label) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            color: Colors.white,
            shape: BoxShape.circle,
            boxShadow: [
              BoxShadow(color: Colors.black12, blurRadius: 4),
            ],
          ),
          child: Icon(icon, size: 30, color: Colors.blue),
        ),
        SizedBox(height: 8),
        Text(label, style: TextStyle(fontSize: 14)),
      ],
    );
  }

  Widget _buildInputBar() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      color: Colors.white,
      child: Row(
        children: [
          Expanded(
            child: TextField(
              decoration: InputDecoration(
                hintText: "输入消息...",
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                  borderSide: BorderSide.none,
                ),
                filled: true,
                fillColor: Colors.grey[100],
              ),
            ),
          ),
          IconButton(
            icon: Icon(Icons.add, color: Colors.blue),
            onPressed: () {
              setState(() {
                _isPanelVisible = !_isPanelVisible;
              });
            },
          ),
        ],
      ),
    );
  }
}
